
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Checkbox, Button, Card, Form, Input, message } from 'antd';
import React from 'react';

import useStore from '../../store';
import styles from './index.module.scss';

const Login: React.FC = () => {

  const { login, loading } = useStore((state: any) => ({ ...state }));

  const onFinishClick = ({ username, password }: any) => {
    if (username === 'admin' && password === '123456') {
      return login({ username, password });
    }
    message.error('账号或密码错误，请重试！');
  }

  const vcodeImg = ""

  const getImageVerifyCode = () => {

  }

  const onRemeberChange = (e: any) => {

  }

  const onDialogVisible = () => {

  }

  return (
    <>
      <div className={styles.loginpage}>
        <div className={styles.leftlogin}></div>
        <div className={styles.contentwrapper}>
          <div className={styles.projectname}>数字乡村综合服务平台</div>
          <Card className="_bg" bordered={false}>
            <Form
              onFinish={onFinishClick}>
              <Form.Item
                name="username"
                rules={[{ required: true, message: '请输入用户名' }]}>
                <Input prefix={<UserOutlined />} placeholder="请输入用户名：admin" />
              </Form.Item>
              <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input prefix={<LockOutlined />} placeholder="请输入密码：123456" />
              </Form.Item>
              <Form.Item>
                <div className={styles.formrow}>
                  <Input
                    placeholder="验证码"
                    v-model="loginForm.captchaValue"
                    style={{ flex: 1 }}
                  />

                  <div className={styles.verCodeImg}>
                    <img src={vcodeImg} />
                    <span
                      onClick={getImageVerifyCode}
                      style={{ marginLeft: "20px", cursor: "pointer" }}
                    >
                      换一张
                    </span>
                  </div>
                </div>
              </Form.Item>
              <Form.Item>
                <div className={styles.formrow}>
                  <Checkbox onChange={onRemeberChange}>记住用户名和密码</Checkbox>
                  <Button type="text" onClick={onDialogVisible}>
                    忘记密码?
                  </Button>
                </div>
              </Form.Item>
              <Form.Item>
                <Button
                  loading={loading}
                  type="primary"
                  htmlType="submit"
                  className={styles.button}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </>
  );
};
export default Login;